{% extends base %}
{% load i18n %}
{% block content %}
<ul id="nav-user-info" class="nav nav-tabs">
  <li class="active"><a href="/user/{{ id }}" data-div="#user-profile">{% trans 'Profile' %}</a></li>
  {% ifnotequal user.article_count 0 %}<li><a href="/user/articles/{{ id }}" data-div="#user-articles" data-type="article" data-callback="load">{% trans 'Posted Articles' %}</a></li>{% endifnotequal %}
  {% ifnotequal user.comment_count 0 %}<li><a href="/user/comments/{{ id }}" data-div="#user-comments" data-type="comment" data-callback="load">{% trans 'Posted Comments' %}</a></li>{% endifnotequal %}
  <li><a href="/user/changes/{{ id }}" data-div="#user-changes" data-type="change" data-callback="load">{% trans 'Nickname Changes' %}</a></li>
</ul>

<div class="vcard row user-info-tab" id="user-profile">
	<div class="span2">
	   <a href="http://www.gravatar.com/{{ user.email_hash }}" class="url" target="_blank"><img class="avatar photo" src="http://www.gravatar.com/avatar/{{ user.email_hash }}?d=mm&s=160" alt="{{ user.nickname }}"></a>
	   {% if is_me %}<p class="avatar-instruction">{% trans 'To create or modify your avatar, please do it on <a href="http://www.gravatar.com" target="_blank">http://www.gravatar.com</a> with your associated email account.' %}</p>{% endif %}
	</div>
	<dl class="span2">
		<dt>{% trans 'Nickname' %}</dt>
		<dd class="n"><span class="nickname"{% if is_me %} rel="me"{% endif %}>{{ user.nickname|safe }}</span> 
			<span class="user-btns">{% if is_me %}<a href="#change-user-dialog" class="btn" id="change-user" data-toggle="modal">{% trans 'Change' %}</a>{% endif %}</span></dd>
		<dt>{% trans 'Joined' %}</dt>
		<dd><time datetime="{{ user.joined|date:'c' }}">{{ user.joined|pretty_date }}</time></dd>
		<dt>{% trans 'Stats' %}</dt>
		<dd>
			<ul class="unstyled">
				<li><span class="badge"><i class="icon-pencil icon-white"></i> {{ user.article_count }}</span> {% trans 'articles' %}.</li>
				<li><span class="badge"><i class="icon-comment icon-white"></i>  {{ user.comment_count }}</span> {% trans 'comments' %}.</li>
				<li>{% blocktrans with user.like_count as like_count %}Got <span class="badge"><i class="icon-thumbs-up icon-white"></i> {{ like_count }}</span> likes.{% endblocktrans %}</li>
				<li>{% blocktrans with user.hate_count as hate_count %}Got <span class="badge"><i class="icon-thumbs-down icon-white"></i> {{ hate_count }}</span> hates.{% endblocktrans %}</li>
			</ul>
		</dd>
	</dl>
</div>
<ul id="user-articles" class="user-info-tab hide unstyled">
	<li class="load-more"><button class="btn btn-full" data-type="article" data-callback="load" data-source="/user/articles/{{ id }}" data-loading-text="{% trans 'loading...' %}" data-complete-text="{% trans 'Show More' %}">{% trans 'Show More' %}</button></li>
</ul>
<ul id="user-comments" class="user-info-tab hide unstyled">
	<li class="load-more"><button class="btn btn-full" data-type="comment" data-callback="load" data-source="/user/comments/{{ id }}" data-loading-text="{% trans 'loading...' %}" data-complete-text="{% trans 'Show More' %}">{% trans 'Show More' %}</button></li>
</ul>
<ul id="user-changes" class="user-info-tab hide unstyled">
    <li class="load-more"><button class="btn btn-full" data-type="change" data-callback="load" data-source="/user/changes/{{ id }}" data-loading-text="{% trans 'loading...' %}" data-complete-text="{% trans 'Show More' %}">{% trans 'Show More' %}</button></li>
</ul>
{% if is_me %}
<div id="change-user-dialog" class="modal hide fade">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>{% trans 'New Nickname' %}</h3>
    </div> 
    <div class="modal-body">
	    <form id="change-user-form" class="form-horizontal">
	      <input type="hidden" name="id" id="post-article-id" disabled="disabled">
	      <fieldset>
	        <div class="control-group">
	          <label class="control-label" for="change-user-input">{% trans 'Nickname' %}</label>
	          <div class="controls">
	            <input type="text" class="input-xlarge" name="nickname" id="change-user-nickname" value="{{ user.nickname|safe }}">
	          </div>
	        </div>
	      </fieldset>
	    </form>        
    </div>
    <div class="modal-footer">
        <button id="change-user-submit" class="btn btn-primary" data-form="#change-user-form">{% trans 'Save changes' %}</a>
        <button class="btn" onclick="$('#change-user-dialog').modal('hide')">{% trans 'Close' %}</button>
    </div>
</div>
{% endif %}
{% endblock %}